<style>
.tree,.from{
    float: left;
}
.tree{
    width: 35%;
}
.from{
    width: 75%;
}
</style>

<template>
    <div>
        <div class="form">
            <Button type="primary" @click="modalForm = true">添加数据</Button>
            <Button type="primary" @click="removes">删除多个</Button>
            <Input search enter-button @on-search="search" placeholder="Enter something..." v-model="value"/>

            <Table border :columns="columns" :data="data" @on-selection-change="onSelect"></Table>
            <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />

            <Modal v-model="modalForm" title="数据操作">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
                  <FormItem label="请选择图片" prop="img">
                     <!-- <Upload action="//jsonplaceholder.typicode.com/posts/">
                        <Button icon="ios-cloud-upload-outline" @change = "chooseImg" >请选择图片</Button>
                    </Upload> -->
                        <input  type="file" accept  = "image/*" @change = "chooseImg"  />
                </FormItem>
                <FormItem label="药品名" prop="drugName ">
                    <Input v-model="formValidate.drugName" placeholder="请输入药品名"></Input>
                </FormItem>
                <FormItem label="药品英文名" prop="egName">
                    <Input v-model="formValidate.egName " placeholder="请输入药品英文名"></Input>
                </FormItem>
                <FormItem label="主要适用症状" prop="mainSymptom">
                    <Input v-model="formValidate.mainSymptom" placeholder="请输入主要适用症状"></Input>
                </FormItem>
                <FormItem label="剂型" prop="dosageForm">
                    <Input v-model="formValidate.dosageForm" placeholder="请输入剂型"></Input>
                </FormItem>

                  <FormItem label="药品价格" prop="price">
                    <Input v-model="formValidate.price" placeholder="请输入药品价格"></Input>
                </FormItem>
                <FormItem label="药品类型" prop="drugCate">
                    <Input v-model="formValidate.drugCate" placeholder="请输入药品类型"></Input>
                </FormItem>

                <FormItem label="药品介绍" prop="deugFact">
                    <Input v-model="formValidate.deugFact" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入药品介绍"></Input>
                </FormItem>

                 <FormItem label="适用症状" prop="symptom">
                    <Input v-model="formValidate.symptom" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入药品适用症状"></Input>
                </FormItem>
                 <FormItem label="注意事项" prop="announcements">
                    <Input v-model="formValidate.announcements" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入药品注意事项"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                </FormItem>
            </Form>
            <div slot="footer">
            </div>
          </Modal>
        </div>
    </div>

</template>
<script>
import Base from '../../base/Base';
export default {
  mixins: [Base],
  data() {
    return {
        module      : 'product',
        value       : null,
        data        : [],
        total       : 0,
        page        : 1,
        rows        : 5,
        modalForm   : false,
        ids         : [],
        formValidate: {
             drugName     : '',
             egName       : '',
             mainSymptom  : '',
             img          : '',
             dosageForm   : '',
             price        : '',
             drugCate     : '',
             deugFact     : '',
             symptom      : '',
             announcements: ''
      },
      ruleValidate: {
        drugName: [
          {
            required: true,
            message : '请输入药品名称',
            trigger : 'blur'
          }
        ],
        egName: [
          {
            required: true,
            message : '请输入药品英文名称',
            trigger : 'blur'
          }
        ],
        mainSymptom : [
          {
            required: true,
            message : '必须输入适用症状',
            trigger : 'blur'
          }
        ],
        dosageForm: [
          {
            required: true,
            message : '必须输入药品剂型',
            trigger : 'blur'
          }
        ],
         price: [
          {
            required: true,
            message : '必须输入价格',
            trigger : 'blur'
          }
        ],
        drugCate: [
          {
            required: true,
            message : '必须输入药品类型',
            trigger : 'blur'
          }
        ]
       ,
        deugFact: [
          {
            required: true,
            message : '必须输入药品介绍',
            trigger : 'blur'
          }
        ],
         symptom: [
          {
            required: true,
            message : '必须输入药品适用症状',
            trigger : 'blur'
          }
        ],
        announcements: [
          {
            required: true,
            message : '必须输入药品使用注意事项',
            trigger : 'blur'
          }
        ]
      },
      columns: [
        {
          type : 'selection',
          width: 60,
          align: 'center'
        },

        {
          title: '药品名',
          key  : 'drugName'
        },
        {
         title: '药品英文名',
         key  : 'egName'
        },
        {
            title: '主要适用症状',
            key  : 'mainSymptom'
        },
        {
            title: '剂型',
            key  : 'dosageForm'
        },
        {
            title: '价格',
            key  : 'price',
        },
        {
         title: '药品类型',
         key  : 'drugCate'
        },
        {
          title : '操作',
          key   : 'action',
          width : 150,
          align : 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                        console.log(params)
                      this.edit(params.row._id);
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id);
                    }
                  }
                },
                '删除'
              )
            ]);
          }
        }
      ]

    };
  },
  methods:{
            chooseImg (event) {
            let file   = event.target.files[0]
            let reader = new FileReader()
            let img    = new Image()
            // 读取图片
            reader.readAsDataURL(file)
            // 读取完毕后的操作
            reader.onloadend = (e) => {
                img.src = e.target.result
                // 这里的e.target就是reader
                // console.log(reader.result)
                // reader.result就是图片的base64字符串
                this.formValidate.img = reader.result
            }
        }
  }
}
</script>



